<template>
    <view class="page">
        <view class="padding_box">
            <view class="title">我的孩子({{ childrenList.length }})</view>
            <view class="menu_bar_box">
                <view class="mine_item_box u-flex u-col-center u-row-between"
                      v-for="(item,index) in childrenList"
                      @click="$goto('push','/pages/childrenDetails/childrenDetails?childrenData=' + JSON.stringify(item))"
                      :key="index">
                    <view class="left_box u-flex ">
                        <image class="item_img"
                               :src="!item.gender ? '/static/images/mine/coommon_icon_boy01@2x.png':'/static/images/mine/coommon_icon_girl01@2x.png'"
                               mode="" />
                        <view class="menu_title">{{ item.childrenName }}</view>
                        <view v-if="item.defStatus"
                              class="curretn_children">使用中</view>
                    </view>
                    <image class="more_img"
                           src="/static/images/mine/mine_more_hui@2x.png"
                           mode="" />
                </view>
            </view>
        </view>
        <view class="footer_box safe-area-inset-bottom">
            <u-button @click="$goto('push','/pages/bindChildren/bindChildren')"
                      type="primary"
                      :custom-style="customStyle"
                      :ripple="true"
                      shape="circle"> 添加孩子 </u-button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            customStyle: {
                height: '80rpx',
                background: 'linear-gradient(154deg, #7CC3F2 0%, #2979FF 100%)',
                borderRadius: '40rpx',
            },
            childrenList: [],
        }
    },
    onShow() {
        this.getChildren()
    },
    onLoad() {

    },
    methods: {
        // 获取孩子列表
        getChildren() {
            let _this = this
            this.$api.getChildren({}, res => {
                if (res.code == 0) {
                    this.childrenList = res.data
                }
            });
        },
    }
}
</script>

<style>
.page {
    height: 100%;
    background-color: #f0f2f5;
}
</style>
<style lang="scss" scoped>
.padding_box {
    position: relative;
    padding: 30rpx 30rpx 0 30rpx;
    background-color: #f0f2f5;
}
.menu_bar_box {
    position: relative;
    margin-top: 30rpx;
    background-color: #fff;
    border-radius: 32rpx;
    overflow: hidden;
    .mine_item_box {
        position: relative;
        padding: 30rpx;
        border-bottom: 1rpx solid #f5f5f5;
        .item_img {
            width: 56rpx;
            height: 56rpx;
            margin: 4rpx 16rpx 0 0;
        }
        .more_img {
            width: 32rpx;
            height: 32rpx;
        }
        .curretn_children {
            margin-left: 30rpx;
            font-size: 24rpx;
            color: #fff;
            padding: 8rpx;
            background: #63b9f2;
            border-radius: 8rpx;
        }
    }
    .contact_btn {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 120rpx;
        opacity: 0;
    }
}
.title {
    color: #999999;
    font-size: 24rpx;
}
</style>
